<template>
	<view class="jobName">
		<span>{{info.postTitle}}</span>
		<view class="row2">
			<span>{{info.priceDesc}}</span>
			<span v-if="info.bizLiftDesc">+{{info.bizLiftDesc}}%提成</span>
		</view>
		<view class="row3" v-if="type===0">
			<view class="childBox" v-for="(item,index) in info.tags" :key="index">
				{{item}}
			</view>
		</view>
		<view class="row4">
			<view class="" style="display: inline-block;" v-if="type===0">
				<image v-for="(item,index) in info.enrollAvatars" :key="index" :src="item" v-if="item" alt="" mode="scaleToFill"></image>
				<image v-for="(item,index) in info.enrollAvatars" :key="index" src="/static/img/headimg.png" v-if="!item" alt="" mode="scaleToFill"></image>
				<span>{{info.enrollNoDesc}}人报名</span>
			</view>
			<view class="" style="display: inline-block;" v-if="type===1">
				<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/8acd263a-46df-464f-af5a-5d1bb1a1a9b7.png" mode="scaleToFill"></image>
				<span>&nbsp;{{bossName}}&nbsp;·&nbsp;个人招聘</span>
			</view>
			
			<view class="collection" v-show="!collection" @click="collectionClick">
				<image src="/static/img/jobDetail/notYetCollection.png" alt="" mode="scaleToFill"></image>
				<span>收藏职位</span>
			</view>
			<view class="collection" v-show="collection" @click="collectionClick">
				<image src="/static/img/jobDetail/collection.png" alt="" mode="scaleToFill"></image>
				<span>已收藏职位</span>
			</view>
		</view>
		
		<button v-if="type===1" @click="toJobDetail">职位详情</button>
		
		
		
	</view>
</template>

<script>
	export default {
		name:"jobName",
		data() {
			return {
				jobName:'',
				salary:'',		//薪资
				bizLiftDesc:'',//提成
				enrollNoDesc:'',		//报名人数
				tagList:['日结','长期兼职','有提成'],
				imgList:[
					'/static/img/jobDetail/collection.png',
					'/static/img/jobDetail/collection.png',
					'/static/img/jobDetail/collection.png',
					'/static/img/jobDetail/collection.png'
				],
				collection:false,
				bossName:'马老师'
			};
		},
		props:{
			type:{
				type:Number,
				default:0
			},
			info:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		mounted() {
			this.jobName=this.info.postTitle
			this.salary=this.info.priceDesc
			this.bizLiftDesc=this.info.bizLiftDesc
			this.enrollNoDesc=this.info.enrollNoDesc
			this.imgList=this.info.enrollAvatars
			this.tagList=this.info.tags
			this.collection=this.info.collected
			
		},
		methods:{
			toJobDetail(){
				uni.navigateTo({
					url:'/subpageB/common/jobDetail'
				})
			},
			setCollection(boo){
				//console.log('setCollection',boo);
				this.collection=boo
			},
			collectionClick(){
				this.$store.dispatch('initDic').then(() => {
					this.$http.request({
						url:'/post/collectManage',
						data:{
							postId:this.info.postId,
							type:this.collection?2:1
						}
					}).then(result=>{
						let res=result.data
						console.log(res);
						this.collection=!this.collection
					})
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	
	.jobName{
		display: block;
		position: relative;
		width: 686rpx;
		margin: 32rpx;
		padding-top: 32rpx;
		background-color: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		
		>span{
			display: block;
			margin: 0 0 6rpx 32rpx;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #001A18;
		}
		
		.row2{
			margin-left: 32rpx;
			margin-bottom: 10rpx;
			span:nth-of-type(1){
				font-size: 14px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF5F58;
			}
			span:nth-of-type(2){
				
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF5F58;
			}
		}
		
		.row3{
			display: flex;
			flex-wrap: wrap;
			margin: 6rpx 32rpx;
			.childBox{
				margin-right: 10rpx;
				padding: 4rpx 8rpx;
				font-size: 10px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #505E5C;
				background-color:  #F3F7F8;
				border-radius: 4px 4px 4px 4px;	
			}
		}
		
		.row4{
			margin: 32rpx 32rpx 0 32rpx;
			padding: 32rpx 0;
			border-top: 1px solid #F6F6F6;
			font-size: 12px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #505E5C;
			
			image{
				position:relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				border: 1px solid #FFFFFF;
				vertical-align: -14rpx;
			}
			image:nth-of-type(1){
				
			}
			image:nth-of-type(2){
				left: -18rpx;
			}
			image:nth-of-type(3){
				left:-36rpx
			}
			image:nth-of-type(4){
				left: -54rpx;
			}
			
			.collection{
				float: right;
				image{
					width: 32rpx;
					height: 32rpx;
					vertical-align: -8rpx;
				}
				span{
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
			}
		}
	
		button{
			position: absolute;
			top: 86rpx;
			right: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width:156rpx;
			height: 50rpx;
			background: #08C8BD;
			border-radius: 100rpx;
			font-size: 12px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	
	
	}
</style>